<#include "/shared/layout.ftl" />

<@layoutHead title="用户列表"></@layoutHead>

<@layoutBody titles=["用户列表"]>

<button id="removeButton" class="layui-btn layui-btn-small layui-btn-primary">
    <i class="layui-icon">&#xe640;</i>删除
</button>
<table id="userTable" lay-filter="userTable"></table>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit-info">信息</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit-password">密码</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit-permission">权限</a>
</script>
<script type="text/javascript">
    var table;
    var options = {
        id: 'userTable',
        elem: '#userTable',
        url: '${baseUrlAdmin}/user/listAjax',
        method: 'post',
        page: true,
        limits: [2, 10, 30, 60, 90, 150, 300],
        limit: 10,
        request: {pageName: 'pageIndex', limitName: 'pageSize'},
        response: {
            statusName: 'code',   //数据状态的字段名称，默认：code
            statusCode: 0,        //成功的状态码，默认：0
            msgName: 'message',        //状态信息的字段名称，默认：msg
            countName: 'total',     //数据总数的字段名称，默认：count
            dataName: 'data'        //数据列表的字段名称，默认：data
        },
        loading: true,
        even: true,
        size: 'sm',
        cols: [[
            {checkbox: true},
            {field: 'id', title: 'ID', width: 80, align: 'center'},
            {field: 'roleId', title: '角色ID', width: 100, align: 'center'},
            {field: 'userId', title: '用户ID', width: 300, align: 'center'},
            {field: 'token', title: 'Token', width: 300, align: 'center'},
            {field: 'name', title: '昵称', width: 120, align: 'center'},
            {field: 'email', title: '邮箱', width: 200, align: 'center'},
            {field: 'permission', title: '权限', width: 100, align: 'center'},
            {field: 'type', title: '类型', width: 100, align: 'center'},
            {field: 'status', title: '状态', width: 100, align: 'center'},
            {title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#toolbar'}
        ]]
    };
    layui.use('table', function () {
        table = layui.table;
        table.render(options);

        //监听工具条
        table.on('tool(userTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var index = tr.data('index');
            var tds = tr.find('td');
            var userId = tds.eq(3).text();
            if (layEvent === 'detail') { //查看
                console.log('查看 第' + index + '行');
                var titles = ['ID', '角色ID', '用户ID', 'Token', '昵称', '邮箱', '权限', '类型', '状态'];
                var ulNode = '<ul>';
                $.each(titles, function (index, item) {
                        ulNode += '<li>{0}:{1}</li>'.format(item, tds.eq(index + 1).text());
                });
                ulNode += '</ul>';
                layer.open({title: '查看', content: ulNode, area: 'auto', maxWidth: 500});
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit-info') { //编辑
                console.log('编辑 第' + index + '行');
                window.location.href = '${baseUrlAdmin}/user/editInfo?userId={0}'.format(userId);
            } else if (layEvent === 'edit-password') {
                window.location.href = '${baseUrlAdmin}/user/editPassword?userId={0}'.format(userId);
            } else if (layEvent === 'edit-permission') {
                window.location.href = '${baseUrlAdmin}/user/editPermission?userId={0}'.format(userId);
            }
        });

    });


    $('#removeButton').on('click', function (e) {
        var checkStatus = table.checkStatus('userTable');
        if (checkStatus.data === undefined || checkStatus.data.length === 0) {
            layer.alert('最低选中一行');
            return false;
        }
        var confirmMessage = checkStatus.isAll ? '确定要全部删除吗' : '确定要删除吗';
        layer.confirm(confirmMessage, function (index) {
            var idArray = [];
            $.each(checkStatus.data, function (index, item) {
                idArray.push(item.id);
            });
            $.post('${baseUrlAdmin}/user/remove', {idArray: idArray.join(',')}, function (data) {
                if (parseInt(data.code) === 0) {
                    table.reload('userTable', options);
                } else {
                    layer.alert(data.message);
                }
            });
            layer.close(index);
        });
    });
</script>
</@layoutBody>